window.addEventListener('load', function() {
    // this.alert(1);

    // 1. 获取元素
    var focus = this.document.querySelector('.focus');
    var focus_ul = focus.children[0];
    var focus_ol = focus.children[1];

    var focus_width = focus.offsetWidth;

    // 2.利用定时器自动轮播图图片
    var index = 0;
    var timer = this.setInterval(function() {
        index++;
        var translatex = -index * focus_width;
        // 可以加一个过渡，让图片慢慢过渡
        focus_ul.style.transition = 'all .3s';
        focus_ul.style.transform = 'translateX(' + translatex + 'px)';
    }, 2000);

    // 上述定时器，会有一个bug，也就是最后一张图片后出现空白图片
    // 等着我们过渡完成之后，再去判断 监听过渡完成的事件 transitionend 
    focus_ul.addEventListener('transitionend', function() {
        // 无缝滚动
        if (index >= 6) {
            index = 0;

            // 去掉过渡效果，让图片快速跳回到第一张
            focus_ul.style.transition = 'none';

            // 利用最新的索引号乘以宽度 去滚动图片
            var translatex = -index * focus_width;
            focus_ul.style.transform = 'translateX(' + translatex + 'px)';
        } else if (index < 0) {
            index = 5;
            // 去掉过渡效果，让图片快速跳回到第一张
            focus_ul.style.transition = 'none';

            // 利用最新的索引号乘以宽度 去滚动图片
            var translatex = -index * focus_width;
            focus_ul.style.transform = 'translateX(' + translatex + 'px)';
        }

        // 小圆点跟随变化
        // 把ol里面li带有current类名的选出来去掉类名 remove
        focus_ol.querySelector('.current').classList.remove('current');
        // 让当前索引号 的小li 加上 current   add
        focus_ol.children[index].classList.add('current');
    });

    // 3. 手指滑动轮播图
    // 3.1 获取手指初始位置
    // 3.2 手指滑动，获取手指移动距离
    var startX = 0;
    var moveX = 0;
    var flag = false; //判断手指是否移动
    focus_ul.addEventListener('touchstart', function(e) {
        clearInterval(timer);
        startX = e.targetTouches[0].pageX;
    });

    focus_ul.addEventListener('touchmove', function(e) {
        // 3.2.1 手指移动距离 = 手指当前位置 - 手指初始位置
        moveX = e.targetTouches[0].pageX - startX;

        // 盒子此时的位置为 -index * focus_width + moveX
        var translatex = -index * focus_width + moveX;

        // 手指移动的时候，不需要加过渡效果
        focus_ul.style.transition = 'none';
        focus_ul.style.transform = 'translateX(' + translatex + 'px)';

        flag = true;
        // 阻止屏幕默认滚动行为
        e.preventDefault();
    });

    focus_ul.addEventListener('touchend', function() {
        // 手指移开后，恢复自动轮播图
        // 还是需要先清理一下定时器，保证只有一个定时器在运行
        clearInterval(timer);

        timer = setInterval(function() {
            index++;
            var translatex = -index * focus_width;
            // 可以加一个过渡，让图片慢慢过渡
            focus_ul.style.transition = 'all .3s';
            focus_ul.style.transform = 'translateX(' + translatex + 'px)';
        }, 2000);


        //  如果用户手指移动，在手指松开时，进行判断，
        if (flag) {
            // 手指向左或者向右滑动图片移动的位置不超过50时，弹回原来的图片
            if (Math.abs(moveX) >= 50) {
                // 如果为正数，则为下一张，如果为负数，则为上一张
                if (moveX > 0) {
                    index--;

                } else {
                    index++;

                }
                var translatex = -index * focus_width;
                // 可以加一个过渡，让图片慢慢过渡
                focus_ul.style.transition = 'all .3s';
                focus_ul.style.transform = 'translateX(' + translatex + 'px)';

            } else {
                var translatex = -index * focus_width;
                // 可以加一个过渡，让图片慢慢过渡
                focus_ul.style.transition = 'all .1s';
                focus_ul.style.transform = 'translateX(' + translatex + 'px)';
            }
        }

    });
})